<template>
    <view class="floating-ai-btn" :class="{
        'floating-ai-btn--animate': isAnimating,
        'floating-ai-btn--collapsed': isCollapsed
    }" @click="handleClick" @touchstart="handleTouchStart" @touchend="handleTouchEnd"
        :style="{ bottom: bottomOffset + 'px' }">
        <!-- AI图标 -->
        <view class="ai-icon" :class="{ 'ai-icon--pulse': isPulsing }">
            <image src="/static/ai/ai.png" class="ai-icon-image" mode="aspectFit" />
        </view>

        <!-- 消息提示气泡 -->
        <view v-if="showTip && !isCollapsed" class="message-bubble" @click.stop>
            <text class="bubble-text">{{ tipMessage }}</text>
            <view class="bubble-arrow"></view>
        </view>

        <!-- 消息数量徽章 -->
        <view v-if="messageCount > 0" class="message-badge">
            {{ messageCount > 99 ? '99+' : messageCount }}
        </view>
    </view>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

// Props
const props = defineProps({
    // 底部偏移量
    bottomOffset: {
        type: Number,
        default: 100
    },
    // 是否显示提示
    showTip: {
        type: Boolean,
        default: false
    },
    // 提示消息
    tipMessage: {
        type: String,
        default: '有什么书法问题想问我吗？'
    },
    // 消息数量
    messageCount: {
        type: Number,
        default: 0
    },
    // 自动靠边延迟时间（毫秒）
    collapseDelay: {
        type: Number,
        default: 3000
    }
})

// Emits
const emit = defineEmits(['click'])

// 响应式数据
const isAnimating = ref(false)
const isPulsing = ref(true)
const isCollapsed = ref(false)
let collapseTimer = null
let userInteracting = ref(false)

// 点击事件处理
const handleClick = () => {
    isAnimating.value = true

    // 重置靠边状态
    resetCollapseTimer()

    // 发送点击事件
    emit('click')

    // 导航到AI助手页面
    uni.navigateTo({
        url: '/service_pages/ai-assistant/index',
        success: () => {
            console.log('跳转AI助手页面成功')
        },
        fail: (err) => {
            console.error('跳转失败:', err)
            uni.showToast({
                title: '页面跳转失败',
                icon: 'error',
                duration: 2000
            })
        }
    })

    // 重置动画状态
    setTimeout(() => {
        isAnimating.value = false
    }, 300)
}

// 触摸开始处理
const handleTouchStart = () => {
    userInteracting.value = true
    clearCollapseTimer()
    expandButton()
}

// 触摸结束处理
const handleTouchEnd = () => {
    userInteracting.value = false
    resetCollapseTimer()
}

// 清除靠边计时器
const clearCollapseTimer = () => {
    if (collapseTimer) {
        clearTimeout(collapseTimer)
        collapseTimer = null
    }
}

// 重置靠边计时器
const resetCollapseTimer = () => {
    clearCollapseTimer()
    expandButton()

    collapseTimer = setTimeout(() => {
        if (!userInteracting.value) {
            collapseButton()
        }
    }, props.collapseDelay)
}

// 收缩按钮
const collapseButton = () => {
    isCollapsed.value = true
}

// 展开按钮
const expandButton = () => {
    isCollapsed.value = false
}

// 开始呼吸动画
const startPulseAnimation = () => {
    isPulsing.value = true
}

// 停止呼吸动画
const stopPulseAnimation = () => {
    isPulsing.value = false
}

// 生命周期
onMounted(() => {
    // 延迟启动呼吸动画
    setTimeout(() => {
        startPulseAnimation()
    }, 1000)

    // 启动自动靠边计时器
    resetCollapseTimer()
})

onUnmounted(() => {
    stopPulseAnimation()
    clearCollapseTimer()
})

// 暴露方法给父组件
defineExpose({
    startPulseAnimation,
    stopPulseAnimation,
    collapseButton,
    expandButton,
    resetCollapseTimer
})
</script>

<style lang="scss" scoped>
.floating-ai-btn {
    position: fixed;
    right: 30rpx;
    z-index: 9999;
    width: 80rpx;
    height: 80rpx;
    background: linear-gradient(135deg, #7eb5f3, #c2def9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6rpx 20rpx rgba(74, 144, 226, 0.4);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);

    &:active {
        transform: scale(0.95);
    }

    &--animate {
        animation: bounce 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    }

    &--collapsed {
        right: -20rpx;
        width: 60rpx;
        height: 60rpx;
        opacity: 0.8;

        .ai-icon {
            transform: scale(0.8);
            width: 32rpx;
            height: 32rpx;
        }

        .message-badge {
            transform: scale(0.8);
        }
    }

    .ai-icon {
        transition: all 0.3s ease;
        width: 44rpx;
        height: 44rpx;
        display: flex;
        align-items: center;
        justify-content: center;

        .ai-icon-image {
            width: 100%;
            height: 100%;
        }

        &--pulse {
            animation: pulse 2s infinite ease-in-out;
        }
    }

    .message-bubble {
        position: absolute;
        right: 120rpx;
        top: 50%;
        transform: translateY(-50%);
        background: #fff;
        padding: 16rpx 20rpx;
        border-radius: 16rpx;
        box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
        max-width: 320rpx;
        min-width: 180rpx;

        .bubble-text {
            font-size: 24rpx;
            color: #333;
            line-height: 1.4;
            word-wrap: break-word;
        }

        .bubble-arrow {
            position: absolute;
            right: -12rpx;
            top: 50%;
            transform: translateY(-50%);
            width: 0;
            height: 0;
            border-left: 12rpx solid #fff;
            border-top: 8rpx solid transparent;
            border-bottom: 8rpx solid transparent;
        }
    }

    .message-badge {
        position: absolute;
        top: -6rpx;
        right: -6rpx;
        min-width: 32rpx;
        height: 32rpx;
        background: #ff4757;
        color: #fff;
        border-radius: 16rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18rpx;
        font-weight: 600;
        padding: 0 6rpx;
        box-shadow: 0 2rpx 8rpx rgba(255, 71, 87, 0.4);
    }
}

// 动画定义
@keyframes bounce {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.05);
        opacity: 0.8;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

// 响应式适配
@media (max-width: 750rpx) {
    .floating-ai-btn {
        width: 80rpx;
        height: 80rpx;
        right: 20rpx;

        &--collapsed {
            right: -15rpx;
            width: 50rpx;
            height: 50rpx;

            .ai-icon {
                width: 28rpx;
                height: 28rpx;
            }
        }

        .ai-icon {
            width: 36rpx;
            height: 36rpx;

            .ai-icon-image {
                width: 100%;
                height: 100%;
            }
        }

        .message-bubble {
            right: 100rpx;
            max-width: 260rpx;
            padding: 12rpx 16rpx;

            .bubble-text {
                font-size: 22rpx;
            }
        }

        .message-badge {
            min-width: 28rpx;
            height: 28rpx;
            font-size: 16rpx;
        }
    }
}

// 深色模式适配
@media (prefers-color-scheme: dark) {
    .floating-ai-btn {
        background: linear-gradient(135deg, #2c5282, #2a4365);
        box-shadow: 0 6rpx 20rpx rgba(44, 82, 130, 0.4);

        .message-bubble {
            background: #2d3748;

            .bubble-text {
                color: #e2e8f0;
            }

            .bubble-arrow {
                border-left-color: #2d3748;
            }
        }
    }
}
</style>